<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p><button @click="randGrade">随机成绩</button></p>

        <div v-show="grade>=0">
            <p>你的成绩是: {{grade}}</p>
            <p>是否及格: 
                <span v-show="grade>=60">及格</span>
                <span v-show="grade<60">不及格</span>
            </p>
            <p>成绩等级: 
                <span v-show="grade>=90">A</span>
                <span v-show="grade>=80&&grade<90">B</span>
                <span v-show="grade>=70&&grade<80">C</span>
                <span v-show="grade>=60&&grade<70">D</span>
                <span v-show="grade<60">E</span>
            </p>
        </div>
        <!-- <div>
       
            <template v-if="isLogin">
                <span >欢迎,老铁</span>
                <span >退出登录</span>
            </template>
            <template>
                <a  href="">你好,请登录</a>
                <a  href="">免费注册</a>
            </template>

        </div> -->


    </div>
</body>
<script>
    // 条件渲染
    // v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
    // v-if="指令值"  指令值结果为true => 渲染 , 为false就不渲染


    // 条件展示 (条件展示元素的选项)
    // v-if 指令用于条件性地展示一块内容,这块内容只会在指令的表达式返回 truthy 值的时候被展示(display:block),否则就隐藏(display:none)。 (无论条件是否成立 元素都会被渲染, 区别就是元素是否显示(视觉方面))


    // v-if vs v-show
    // v-if 条件渲染,根据指令的结果判断元素是否被渲染,指令值结果为true => 渲染 , 为false就不渲染
    // v-if 初始渲染成本较低, v-if切换成本比较高(元素渲染时生成元素,不渲染时删除元素)
    
    // v-show 条件展示,根据指令的结果判断元素是否被展示,指令值结果为true => 展示(display:block) , 为false就不展示(display:none)
    // v-show 初始渲染成本较高  (无论条件是否成立 元素都会被渲染, 区别就是元素是否显示
    // v-show 切换成本比较低  (无论条件是否成立 元素都会被渲染  -> 后期只需进行display:none/block之间的切换)


 

    var vm = new Vue({
        el:"#app",
        data:{
            // grade:-100 + Math.round(Math.random()*200),
            grade:null,  // null >= 0  => true
            isLogin:false,
        },
        methods:{
            randGrade(){    
                // 100-999    100 + (999-100)
                // -100 到 100的成绩   
                var num =  -100 + Math.round(Math.random()*200)
                console.log(num);
                this.grade = num;
            }
        },

        // 钩子函数(回调函数)  mounted  => Vue实例初始化渲染完毕之后执行的函数(有就执行,没有就不执行)
        mounted:function() {
            console.log("初始化渲染完毕");
            this.randGrade();  // Vue根实例渲染完成之后 先调用方法生成成绩
        },
    })






</script>
</html>